<template>
    <div>
        <p>我是father组件</p>
        <button @click="num++">num1++</button>
        <button @click="addBoyFn">添加男生</button>
        <hr />
        <Son></Son>
    </div>
</template>

<script setup>
import Son from './Son.vue';
import { ref, reactive, provide } from 'vue';
// 语法: 提供依赖
// provide(key, value)
const num = ref(1000);
provide('num1', num);
const boyArr = reactive(['彭于晏', '黄宗泽', '吴磊']);
provide('boyarr', boyArr);

const addBoyFn = () => {
    boyArr.push('黄勃')
}

</script>
<style scoped></style>